<!--
 * @Description:
 * @Author: 呆龙
 * @Date: 2023-09-18 16:33:08
 * @LastEditTime: 2023-09-20 17:03:30
 * @LastEditors: 呆龙
-->
<template>
  <div class="main">
    <a-card :bodyStyle="{ display: 'flex' }">
      <a-input-group compact style="width: 20%">
        <a-select v-model:value="select" style="width: 30%">
          <a-select-option value="name">名称</a-select-option>
          <a-select-option value="code">编码</a-select-option>
        </a-select>
        <a-input v-model:value="searchText" style="width: 70%" />
      </a-input-group>
      <a-button type="primary" @click="addStatus">添加状态</a-button>
    </a-card>
    <MyTable
      @reload="getOvertrueConfigData()"
      :tableData="tableData"
      :columns="columns"
      :loading="tableLoading"
      useNumber
      :pagination="pagination"
    />
  </div>
  <a-drawer
    v-model:visible="showEditForm"
    title="编辑提案状态"
    placement="right"
    @close="showEditForm = false"
    destroyOnClose
    size="large"
  >
    <MyEditForm
      :editData="editData"
      @updateOver="(showEditForm = false), getOvertrueConfigData()"
    />
  </a-drawer>
</template>

<script setup lang="ts">
import { onMounted, ref, h, createVNode } from "vue";
import { getOvertrueConfig, editOvertureState } from "@/api/overtrue";
import MyTable from "@/components/CommonDai/Table.vue";
import MyEditForm from "./EditForm.vue";
import { Switch, Modal, Tag, Button, message } from "ant-design-vue";
import { forEach } from "lodash";

onMounted(() => {
  getOvertrueConfigData();
});

/** 搜索功能 */
const select = ref("name");
const searchText = ref("");
/** 添加状态功能 */
const addStatus = () => {
  editData.value = undefined;
  showEditForm.value = true;
};
/** 当前编辑的状态信息 */
const editData = ref<any>();
/**
 * 修改配置项的函数 value 0=关闭 1=开启 2=编辑
 */
const changeOvertureConfig = (
  _id: string,
  value: number,
  code: number,
  record: any,
  menuId: string
) => {
  switch (value) {
    case 0:
      commonChangeConfig(_id, "code", code, "status", false, menuId);
      break;
    case 1:
      commonChangeConfig(_id, "code", code, "status", true, menuId);
      break;
    case 2:
      editData.value = record;
      showEditForm.value = true;
      break;
  }
};
/**
 * 获取提案的状态配置信息
 */

const getOvertrueConfigData = () => {
  tableLoading.value = true;
  getOvertrueConfig().then((res: any) => {
    tableData.value = res.data.data.sort((a: any, b: any) => a.code - b.code);
    tableLoading.value = false;
  });
};
/**
 * 修改配置的复用函数 name=配置项的名称 rule=配置项的值 key=修改的key value=修改的值 menuId=菜单的id
 */
const commonChangeConfig = async (
  _id: string,
  name: string,
  rule: any,
  key: string,
  value: any,
  menuId: string
) => {
  try {
    if (key === "status") {
      await editOvertureState({ _id, status: value, menuId });
    } else {
      await editOvertureState({ _id, sign: value });
    }
    message.success("修改配置信息成功!");
    tableData.value = forEach(tableData.value, (item: any) => {
      if (item[name] === rule) {
        item[key] = value;
      }
    });
  } catch {
    message.error("网络错误，请稍后再试!");
  }
};
/** 表格展示功能 */
const tableData = ref<any[]>([]);
const tableLoading = ref<boolean>(false);
const pagination = ref({
  pageSize: 100,
  total: 100,
  current: 1,
  hideOnSinglePage: true,
});
const columns = ref<any[]>([
  {
    title: "状态名称",
    dataIndex: "title",
    align: "center",
    isShow: true,
  },
  {
    title: "状态编码",
    dataIndex: "code",
    align: "center",
    isShow: true,
  },
  {
    title: "状态颜色",
    dataIndex: "color",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return h(
        "div",
        {
          style: {
            width: "25px",
            height: "25px",
            border: "1px solid #fff",
            background: `${text}`,
            margin: "0 auto",
            transform: "scale(1.5)",
            borderRadius: "50%",
          },
        },
        () => "1"
      );
    },
  },
  {
    title: "是否需要签字",
    dataIndex: "sign",
    align: "center",
    isShow: true,
    customRender: ({ text, record }: any) => {
      return createVNode(
        Switch,
        {
          checkedValue: !text,
          onChange: (checked: boolean) => {
            Modal.confirm({
              title: checked
                ? "您确定要打开签字功能吗"
                : "您确定要关闭签字功能吗!",
              style: {
                top: "35%",
              },
              onOk() {
                commonChangeConfig(
                  record._id,
                  "code",
                  record.code,
                  "sign",
                  checked,
                  record.menuId
                );
              },
              class: "test",
            });
          },
        },
        ""
      );
    },
  },
  {
    title: "是否开启",
    dataIndex: "status",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return createVNode(Tag, { color: `${text ? "blue" : "red"}` }, () =>
        text ? "已开启" : "未开启"
      );
    },
  },
  {
    title: "关联菜单",
    dataIndex: "menuName",
    align: "center",
    isShow: true,
  },
  {
    title: "关联角色",
    dataIndex: "title",
    align: "center",
    isShow: true,
    customRender: () => {
      return "暂无";
    },
  },
  {
    title: "前置节点",
    dataIndex: "ahead",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return tableData.value.find(item => item._id === text)?.title;
    },
  },
  {
    title: "后置节点",
    dataIndex: "behind",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return tableData.value.find(item => item._id === text)?.title;
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    isShow: true,
    width: 120,
    customRender: ({ record }: any) => {
      return createVNode(
        "div",
        null,
        ["关闭", "开启", "编辑"].map((item, index) => {
          if (record.status && index === 1) return;
          if (!record.status && index === 0) return;
          return createVNode(
            Button,
            {
              type: "link",
              style: {
                padding: "0 5px",
              },
              onClick: () => {
                if (index === 2) {
                  changeOvertureConfig(
                    record._id,
                    index,
                    record.code,
                    record,
                    record.menuId
                  );
                  return;
                }
                Modal.confirm({
                  title:
                    index === 1 ? "确定要开启此状态吗?" : "确定要关闭此状态吗?",
                  style: {
                    top: "35%",
                    borderRadius: "10px",
                  },
                  onOk() {
                    changeOvertureConfig(
                      record._id,
                      index,
                      record.code,
                      record,
                      record.menuId
                    );
                  },
                });
              },
            },
            () => item
          );
        })
      );
    },
  },
]);
/** 编辑功能 */
const showEditForm = ref(false);
</script>

<style scoped lang="less">
:deep(.ant-card-body) {
  width: 100%;
  justify-content: space-between;
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
:deep(svg) {
  vertical-align: middle;
}
.main {
  height: 100%;
  overflow: auto;
}
</style>
